import React, { useRef, useEffect } from 'react'
import './index.css'

export default function App() {
    const root = useRef();
    useEffect(() => {
        let width = document.documentElement.clientWidth + 'px';
        let height = document.documentElement.clientHeight + 'px';
        root.current.style.width = width;
        root.current.style.height = height;
        window.onresize = () => {
            let width = document.documentElement.clientWidth + 'px';
            let height = document.documentElement.clientHeight + 'px';
            root.current.style.width = width;
            root.current.style.height = height;
        }
    }, [])
    return (
        <div id="root" ref={root}>
            <div className="child1">
                <p style={{fontSize:'20px' , fontWeight: 'bold'}}>CSS3</p>
                <p>动画</p>
            </div>
            <div className="child2">
                
            </div>
            <div id="box">
                <div className="bc1">Top</div>
                <div className="bc2">Bottom</div>
                <div className="bc3">Left</div>
                <div className="bc4">Right</div>
                <div className="bc5">Before</div>
                <div className="bc6">After</div>
            </div>
        </div>
    )
}
